<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>点餐</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 统计快捷方式样式 */
        .console-link-block {
            font-size: 16px;
            padding: 20px 20px;
            border-radius: 4px;
            background-color: #40D4B0;
            color: #FFFFFF !important;
            box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
            position: relative;
            overflow: hidden;
            display: block;
        }
        .console-link1-block {
            font-size: 16px;
            padding: 20px 20px;
            border-radius: 4px;
            background-color: #F591A2;
            color: #FFFFFF !important;
            box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
            position: relative;
            overflow: hidden;
            display: block;
        }

        .console-link-block .console-link-block-num {
            font-size: 40px;
            margin-bottom: 5px;
            opacity: .9;
        }

        .console-link-block .console-link-block-text {
            opacity: .8;
        }

        .console-link-block .console-link-block-icon {
            position: absolute;
            top: 50%;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 50px;
            line-height: 50px;
            margin-top: -25px;
            color: #FFFFFF;
            opacity: .8;
        }

        .console-link-block .console-link-block-band {
            color: #fff;
            width: 100px;
            font-size: 12px;
            padding: 2px 0 3px 0;
            background-color: #E32A16;
            line-height: inherit;
            text-align: center;
            position: absolute;
            top: 8px;
            right: -30px;
            transform-origin: center;
            transform: rotate(45deg) scale(.8);
            opacity: .95;
            z-index: 2;
        }
        .console-link1-block .console-link-block-num {
            font-size: 40px;
            margin-bottom: 5px;
            opacity: .9;
        }

        .console-link1-block .console-link-block-text {
            opacity: .8;
        }

        .console-link1-block .console-link-block-icon {
            position: absolute;
            top: 50%;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 50px;
            line-height: 50px;
            margin-top: -25px;
            color: #FFFFFF;
            opacity: .8;
        }

        .console-link1-block .console-link-block-band {
            color: #fff;
            width: 100px;
            font-size: 12px;
            padding: 2px 0 3px 0;
            background-color: #E32A16;
            line-height: inherit;
            text-align: center;
            position: absolute;
            top: 8px;
            right: -30px;
            transform-origin: center;
            transform: rotate(45deg) scale(.8);
            opacity: .95;
            z-index: 2;
        }



    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid "  >
    <span class="layui-badge">已点餐</span>
    <hr class="layui-border-blue">
    <div class="layui-row layui-col-space15" id="cardcycle">

    </div>
</div>




<div class="layui-fluid "  >
    <span class="layui-badge-green">空闲</span>
    <hr class="layui-border-blue">
    <div class="layui-row layui-col-space15" id="cardcycle2">

    </div>
</div>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script id="demo" type="text/html">

    {{#  layui.each(d.data, function(index, item){ }}
    {{#  if(item.pids.length > 4){ }}

            {{#  if(item.isorder==1){ }}

                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4" >
                    <a href="javascript:;" onclick=tobill("{{item.id}}","{{item.name}}")>
                <div class="console-link1-block">
                <div class="console-link-block-num">¥{{ item.hallsum }}</div>
                <div class="console-link-block-text">{{ item.name }}</div>
                <i class="console-link-block-icon layui-icon layui-icon-cart"></i>
                </div>
                    </a>
                </div>
            {{#  } }}
    {{#  } }}
    {{#  }); }}


</script>
<script id="demo2" type="text/html">

    {{#  layui.each(d.data, function(index, item){ }}
    {{#  if(item.pids.length > 4){ }}
    {{#  if(item.isorder==0){ }}

    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4" >
        <a href="javascript:;" onclick=conveyId("{{item.id}}","{{item.name}}")>
            <div class="console-link-block" >
            <div class="console-link-block-num">{{ item.volume }}人</div>
            <div class="console-link-block-text" id="id_{{=item.id}}">{{ item.name }}</div>
            <i class="console-link-block-icon layui-icon layui-icon-layer"></i>
        </div>
        </a>
    </div>


    {{#  } }}

    {{#  } }}
    {{#  }); }}

</script>
<script>
    function conveyId(id,name){
        window.location.href="/hallRoomJoint/formorder?id="+id+"&name="+name;

    }

    function tobill(id,name){
        window.location.href="/hallRoomJoint/formbill?name="+name+"&id="+id;
    }
</script>
<script>

    layui.use(['layer', 'table', 'tableX', 'notice', 'tree', 'treeTable', 'xnUtil','laytpl'], function () {
        var $ = layui.jquery;
        var laytpl = layui.laytpl;
        function up2(x,y){
            return y.hallsum-x.hallsum
        }
        $.ajax({
            url : getProjectUrl() +"hallRoomJoint/list",//后台请求的数据
            dataType: 'json', //数据格式
            type : "get",//请求方式
            async : true,//是否异步请求
            success : function(data) {   //如果请求成功，返回数据。
                data.data.sort(up2);//降序输出总额
                var getTpl = demo.innerHTML
                    , view = document.getElementById('cardcycle');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });

            },
            error : function (arg1) {
                alert("加载数据失败");
                console.log(arg1);
            }
        })
        function up2(x,y){
            return x.volume-y.volume
        }

        $.ajax({
            url : getProjectUrl() +"hallRoomJoint/list",//后台请求的数据
            dataType: 'json', //数据格式
            type : "get",//请求方式
            async : true,//是否异步请求
            success : function(data) {   //如果请求成功，返回数据。
                data.data.sort(up2);//升序输出容纳人数
                var getTpl = demo2.innerHTML
                    , view = document.getElementById('cardcycle2');
                laytpl(getTpl).render(data, function (html) {

                    view.innerHTML = html;
                });

            },
            error : function (arg1) {
                alert("加载数据失败");
                console.log(arg1);
            }
        })
    })




</script>
</body>
</html>
